<!DOCTYPE html>
<html style="background-color: #f2f2f2;" lang="en">
<%include("/common/header.html",{title:''}){}%>
<body>
<style>
  /*删格化5等份*/
  .layui-col-lg2-4,.layui-col-md2-4,.layui-col-sm2-4,.layui-col-xs2-4{position:relative;display:block;box-sizing:border-box}
  .layui-col-xs2-4{float:left}
  .layui-col-xs2-4{width:19.9999992%}
  .layui-col-xs-offset2-4{margin-left:19.9999992%}
  @media screen and (min-width:768px){
    .layui-col-sm2-4{float:left}
    .layui-col-sm2-4{width:19.9999992%}
    .layui-col-sm-offset2-4{margin-left:19.9999992%}
  }
  @media screen and (min-width:992px){
    .layui-col-md2-4{float:left}
    .layui-col-md2-4{width:19.9999992%}
    .layui-col-md-offset2-4{margin-left:19.9999992%}
  }
  @media screen and (min-width:1200px){
    .layui-col-lg2-4{float:left}
    .layui-col-lg2-4{width:19.9999992%}
    .layui-col-lg-offset2-4{margin-left:19.9999992%}
  }

</style>
<div class="layui-fluid">
  <div class="layui-row layui-col-space15">

    <div class="layui-col-sm2-4 layui-col-md2-4">
      <div class="layui-card" style="height: 123px;">
        <div class="layui-card-header">
          <span style="color: #05aaaa;">购买账号总数</span>
          <span class="layui-badge layui-bg-blue layuiadmin-badge">买</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
          <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i style="font-size: 25px;position: absolute;top: 7px;left: 20px;" class="layui-inline layui-icon layui-icon-username"></i><span style="margin-left: 70px;color: #05aaaa;">${toluser}</span></p>
          <p>
            <span style="float:right;color: #05aaaa;">个</span>
          </p>
        </div>
      </div>
    </div>
    <div class="layui-col-sm2-4 layui-col-md2-4">
      <div class="layui-card" style="height: 123px;">
        <div class="layui-card-header">
          <span style="color: #05aaaa;">注册账号总数</span>
          <span class="layui-badge layui-bg-green layuiadmin-badge">注</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
          <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i style="font-size: 25px;position: absolute;top: 7px;left: 20px;" class="layui-inline layui-icon layui-icon-username"></i><span style="margin-left: 70px;color: #05aaaa;">${toltrial}</span></p>
          <p>
            <span style="float:right;color: #05aaaa;">个</span>
          </p>
        </div>
      </div>
    </div>
    <div class="layui-col-sm2-4 layui-col-md2-4">
      <div class="layui-card" style="height: 123px;">
        <div class="layui-card-header">
          <span style="color: #05aaaa;">信息化版数量</span>
          <span class="layui-badge layui-bg-cyan layuiadmin-badge">信</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
          <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i style="font-size: 25px;position: absolute;top: 7px;left: 20px;" class="layui-inline layui-icon layui-icon-senior"></i><span style="margin-left: 70px;color: #05aaaa;">0</span></p>
          <p>
            <span style="float:right;color: #05aaaa;">套</span>
          </p>
        </div>
      </div>
    </div>
    <div class="layui-col-sm2-4 layui-col-md2-4">
      <div class="layui-card" style="height: 123px;">
        <div class="layui-card-header">
          <span style="color: #05aaaa;">物联网版数量</span>
          <span class="layui-badge layui-bg-orange layuiadmin-badge">物</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
          <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i style="font-size: 25px;position: absolute;top: 7px;left: 20px;" class="layui-inline layui-icon layui-icon-template"></i><span style="margin-left: 70px;color: #05aaaa;">16</span></p>
          <p>
            <span style="float:right;color: #05aaaa;">套</span>
          </p>
        </div>
      </div>
    </div>
    <div class="layui-col-sm2-4 layui-col-md2-4">
      <div class="layui-card" style="height: 123px;">
        <div class="layui-card-header">
          <span style="color: #05aaaa;">集成化版数量</span>
          <span class="layui-badge layui-bg-orange layuiadmin-badge">集</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list" style="padding-top: 3px;">
          <p class="layuiadmin-big-font" style="padding-bottom: 0px;"><i style="font-size: 25px;position: absolute;top: 7px;left: 20px;" class="layui-inline layui-icon layui-icon-website"></i><span style="margin-left: 70px;color: #05aaaa;">43</span></p>
          <p>
            <span style="float:right;color: #05aaaa;">套</span>
          </p>
        </div>
      </div>
    </div>

    <!--豆腐块结束-->
    <div class="layui-col-sm12">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-sm6">
          <div class="layui-card">
            <div class="layui-card-header">注册账号逐月统计</div>
            <div class="layui-card-body">
              <table class="layui-table" lay-skin="line">
                <tbody>
                <tr>
                  <td >
                    <div id="container" style="width:100%; height:300px"></div>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="layui-col-sm6">
          <div class="layui-card">
            <div class="layui-card-header">各个版本逐月统计</div>
            <div class="layui-card-body">
              <table class="layui-table" lay-skin="line">
                <tbody>
                <tr>
                  <td >
                    <div id="container2" style="width:100%; height:300px"></div>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="layui-col-sm12">
          <div class="layui-card">
            <div class="layui-card-header">客户分布地图</div>
            <div class="layui-card-body">
              <table class="layui-table" lay-skin="line">
                <tbody>
                <tr>
                  <td >
                    <div id="map" style="width:100%;height: 600px"></div>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>
<%include("/common/foot.html"){}%>
<script type="text/javascript" src="${ctxPath}/js/echarts.min.js"></script>
<script type="text/javascript" src="${ctxPath}/js/china.js"></script>
<script>
  layui.use(['index', 'console', 'AjaxCommon', 'AliangLayui'], function () {
    var $A = layui.AjaxCommon;
    var al = layui.AliangLayui;
    $A.ajax('http://route.showapi.com/32-9', 'post', 'json', {
      'showapi_appid': 28043,
      'showapi_sign': 'fd5ce066f69441bfa078c0ad16129b15',
      'q': 'hello'
    }, function (res) {
      //alert(JSON.stringify(res));
    });
  });



 $(function () {
   initData();
 });
  //生成数据
  function initData() {
    var legendData = ['信息化版本', '物联网版本','集成化版本'];
    var bgColorList = ['#FBB730', '#31BDF2','#6197fb'];
    var axisLabel = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
    var seriesValue = [];

    for (var i = 0; i < legendData.length; i++) {
      var arrData = [];
      var seriesDataVal = null;
      for (var j = 0; j < axisLabel.length; j++) {
        arrData.push(Math.floor(Math.random() * 100));
      }
      seriesDataVal = {
        barWidth: 10,//柱状条宽度
        name:legendData[i],
        type:'bar',
        itemStyle: {
          normal: {
            show: true,//鼠标悬停时显示label数据
           // barBorderRadius: [10, 10, 10, 10],//柱形图圆角，初始化效果
            color: bgColorList[i]
          }
        },
        label: {
          normal: {
            show: true, //显示数据
            position: 'top'//显示数据位置 'top/right/left/insideLeft/insideRight/insideTop/insideBottom'
          }
        } ,
        data:arrData
      };
      seriesValue.push(seriesDataVal);
    }

    buildChart(legendData, axisLabel, seriesValue);

  }

  //生成Echarts图形
  function buildChart(legendData, axisLabel, seriesValue) {
    var chart = document.getElementById('container');
    var echart = echarts.init(chart);
    var option = {
      title: {
        text: "注册账号逐月统计",//正标题
        subtext: ''
      /*  textStyle: {
          fontSize: 18,
          fontWeight: 'normal',
          color: '#666'
        }*/
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'//阴影，若需要为直线，则值为'line'
        }
      },
      toolbox: {
        show: true,
        feature: {
          saveAsImage: {show: true}
        }
      },
      legend: {
        data: ['注册账号'],
        y: 'top'//图例说明文字设置

      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '0%',
        top: '25%',
        containLabel: true
      },
      xAxis: [{
        min: 0,
        type: 'category', //纵向柱状图，若需要为横向，则此处值为'value'， 下面 yAxis 的type值为'category'
        data: axisLabel
      }],
      yAxis: [{
        min: 0,
        type: 'value',
        splitArea: {show: false}
      }],
      label: {
        normal: { //显示bar数据
          show: true,
          position: 'top'
        }
      },
      series: {
        barWidth: 30,//柱状条宽度
        name:'注册账号',
        type:'bar',
        itemStyle: {
          normal: {
            show: true,//鼠标悬停时显示label数据
            // barBorderRadius: [10, 10, 10, 10],//柱形图圆角，初始化效果
            color: 'rgb(0,77,161)'
          }
        },
        label: {
          normal: {
            show: true, //显示数据
            position: 'top'//显示数据位置 'top/right/left/insideLeft/insideRight/insideTop/insideBottom'
          }
        } ,
        data:['57','85','120','122','342','80','222','632','666','124','250','657']
      }
    };

    echart.setOption(option);



    var chart1 = document.getElementById('container2');
    var echart1 = echarts.init(chart1);
    var option1 = {
      title: {
        text: "版本购买账号逐月统计",//正标题
        subtext: '信息化版本/物联网版本/集成化版本'
        /*  textStyle: {
            fontSize: 18,
            fontWeight: 'normal',
            color: '#666'
          }*/
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'//阴影，若需要为直线，则值为'line'
        }
      },
      toolbox: {
        show: true,
        feature: {
          saveAsImage: {show: true}
        }
      },
      legend: {
        data: legendData,
        y: 'top'//图例说明文字设置

      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '0%',
        top: '25%',
        containLabel: true
      },
      xAxis: [{
        min: 0,
        type: 'category', //纵向柱状图，若需要为横向，则此处值为'value'， 下面 yAxis 的type值为'category'
        data: axisLabel
      }],
      yAxis: [{
        min: 0,
        type: 'value',
        splitArea: {show: false}
      }],
      label: {
        normal: { //显示bar数据
          show: true,
          position: 'top'
        }
      },
      series: seriesValue
    };

    echart1.setOption(option1);


 }
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('map'));

  var nameColor = " rgb(55, 75, 113)";
  var name_fontFamily = '宋体';
  var name_fontSize = 35;
  var mapName = 'china';
  var data = [];
  var geoCoordMap = {};
  var toolTipData = [];

  /*获取地图数据*/
  myChart.showLoading();
  var mapFeatures = echarts.getMap(mapName).geoJson.features;
  myChart.hideLoading();
  mapFeatures.forEach(function (v) {
    // 地区名称
    var name = v.properties.name;
    // 地区经纬度
    geoCoordMap[name] = v.properties.cp;
    data.push({
      name: name,
      value: Math.round(Math.random() * 100 + 10)
    });
    toolTipData.push({
      name: name,
      value: [{
        name: "信息化版本客户",
        value: Math.round(Math.random() * 100 + 10) + '位'
      },
        {
          name: "物联网版本客户",
          value: Math.round(Math.random() * 100 + 10) + '位'
        },
        {
          name: "集成化版本客户",
          value: Math.round(Math.random() * 100 + 10) + '位'
        },
        {
          name: "政府客户",
          value: Math.round(Math.random() * 100 + 10) + '位'
        }
      ]
    })
  });

  var max = 480,
    min = 9; // todo
  var maxSize4Pin = 50,
    minSize4Pin = 20;

  var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
      var geoCoord = geoCoordMap[data[i].name];
      if (geoCoord) {
        res.push({
          name: data[i].name,
          value: geoCoord.concat(data[i].value),
        });
      }
    }
    return res;
  };

  option = {


    tooltip: {
      trigger: 'item',
      formatter: function (params) {
        if (typeof (params.value)[2] == "undefined") {
          var toolTiphtml = '';
          for (var i = 0; i < toolTipData.length; i++) {
            if (params.name == toolTipData[i].name) {
              toolTiphtml += toolTipData[i].name + ':<br>';
              for (var j = 0; j < toolTipData[i].value.length; j++) {
                toolTiphtml += toolTipData[i].value[j].name + ':' + toolTipData[i].value[j].value + "<br>"
              }
            }
          }
          console.log(toolTiphtml);
          // console.log(convertData(data))
          return toolTiphtml;
        } else {
          var toolTiphtml = '';
          for (var i = 0; i < toolTipData.length; i++) {
            if (params.name == toolTipData[i].name) {
              toolTiphtml += toolTipData[i].name + ':<br>';
              for (var j = 0; j < toolTipData[i].value.length; j++) {
                toolTiphtml += toolTipData[i].value[j].name + ':' + toolTipData[i].value[j].value + "<br>"
              }
            }
          }
          console.log(toolTiphtml);
          // console.log(convertData(data))
          return toolTiphtml;
        }
      }
    },
    legend: {
      orient: 'vertical',
      y: 'bottom',
      x: 'right',
      data: ['credit_pm2.5'],
      textStyle: {
        color: '#fff'
      }
    },
    visualMap: {
      show: false,
      min: 0,
      max: 600,
      left: 'left',
      top: 'bottom',
      text: ['高', '低'], // 文本，默认为数值文本
      calculable: true,
      seriesIndex: [1],
      inRange: {
        // color: ['#3B5077', '#031525'] // 蓝黑
        // color: ['#ffc0cb', '#800080'] // 红紫
        // color: ['#3C3B3F', '#605C3C'] // 黑绿
        //  color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
        // color: ['#23074d', '#cc5333'] // 紫红
        //   color: ['#00467F', '#A5CC82'] // 蓝绿
        // color: ['#1488CC', '#2B32B2'] // 浅蓝
        // color: ['#00467F', '#A5CC82','#ffc0cb'] // 蓝绿红
        // color: ['#00467F', '#A5CC82'] // 蓝绿
        // color: ['#00467F', '#A5CC82'] // 蓝绿
        // color: ['#00467F', '#A5CC82'] // 蓝绿
        color: ['#22e5e8', '#0035f9', '#22e5e8'] // 蓝绿

      }
    },
    /*工具按钮组*/
    toolbox: {
      show: false,
      orient: 'vertical',
      left: 'right',
      top: 'center',
      feature: {

        dataView: {
          readOnly: false
        },
        restore: {},
        saveAsImage: {}
      }
    },
    geo: {
      show: true,
      map: mapName,
      label: {
        normal: {
          show: false
        },
        emphasis: {
          show: false
        }
      },
      roam: true,
      itemStyle: {
        normal: {
          areaColor: '#031525',
          borderColor: '#097bba'
        },
        emphasis: {
          areaColor: '#2B91B7'
        }
      }
    },
    series: [{
      name: '散点',
      type: 'scatter',
      coordinateSystem: 'geo',
      data: convertData(data),
      symbolSize: function (val) {
        return val[2] / 10;
      },
      label: {
        normal: {
          formatter: '{b}',
          position: 'right',
          show: false
        },
        emphasis: {
          show: false
        }
      },
      itemStyle: {
        normal: {
          color: 'rgba(255,255,0,0.8)'
        }
      }
    },
      {
        type: 'map',
        map: mapName,
        geoIndex: 0,
        aspectScale: 0.75, //长宽比
        showLegendSymbol: false, // 存在legend时显示
        label: {
          normal: {
            show: true
          },
          emphasis: {
            show: false,
            textStyle: {
              color: '#fff'
            }
          }
        },
        roam: true,
        itemStyle: {
          normal: {
            areaColor: '#031525',
            borderColor: '#3B5077',
          },
          emphasis: {
            areaColor: '#2B91B7'
          }
        },
        animation: false,
        data: data
      },
      {
        name: '点',
        type: 'scatter',
        coordinateSystem: 'geo',
        symbol: 'pin', //气泡
        symbolSize: function (val) {
          var a = (maxSize4Pin - minSize4Pin) / (max - min);
          var b = minSize4Pin - a * min;
          b = maxSize4Pin - a * max;
          return a * val[2] + b;
        },
        label: {

          normal: {
            show: false,
            formatter: function (params) {
              return params.data.value[2]
            },
            textStyle: {
              color: '#fff',
              fontSize: 9,
            }
          }
        },
        itemStyle: {

          normal: {
            color: 'rgba(255,255,0,0)', //标志颜色
          }
        },
        zlevel: 6,
        data: convertData(data),
      },
      {
        name: 'Top 5',
        type: 'effectScatter',
        coordinateSystem: 'geo',
        data: convertData(data.sort(function (a, b) {
          return b.value - a.value;
        }).slice(0, 5)),
        symbolSize: function (val) {
          return val[2] / 10;
        },
        showEffectOn: 'render',
        rippleEffect: {
          brushType: 'stroke'
        },
        hoverAnimation: true,
        label: {
          normal: {
            formatter: '{b}',
            position: 'right',
            show: true
          }
        },
        itemStyle: {
          normal: {
            color: 'rgba(255,255,0,0.8)',
            shadowBlur: 10,
            shadowColor: '#05C3F9'
          }
        },
        zlevel: 1
      },

    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
</script>
</body>
</html>